<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>CSS Test: {DESCRIPTION}</title>
  <link rel="author" title="{AUTHOR_NAME}" href="mailto:{AUTHOR_EMAIL}">
  <link rel="help" href="{SPEC_SECTION}">
  <meta name="flags" content="visual scroll {TOKENS}">
  <meta name="assert" content="{ASSERTION}">
  <script src="{HARNESS_URL}testharness.js" type="text/javascript"></script>
  <script src="{HARNESS_URL}testharnessreport.js" type="text/javascript"></script>
  <style type="text/css">
   body {{ margin: 0; }}
   html, body, #test {{ width: 100%; height: 100%; }}
   #log {{ padding: 1em; display: none; }}
   /* Reset viewport values to initial values to ignore UA stylesheet. */
   @{VENDOR_PREFIX}viewport {{
    width: auto;
    height: auto;
    zoom: auto;
    min-zoom: auto;
    max-zoom: auto;
    user-zoom: zoom;
    orientation: auto;
    resolution: auto;
   }}
  </style>
  <style type="text/css">
   /* CSS for the test below. */
   {TEST_CSS}
   /* Set root element font-size to something different from the initial
      font-size to make sure 'rem' and 'em' for @viewport is based on the
      initial font-size, not the root element font-size. */
   html {{ font-size: 2rem; }}
   body {{ font-size: 0.5rem; }}
  </style>
  <script type="text/javascript">
   var test = async_test("CSS Test: {DESCRIPTION}");
   window.onload = function(){{

    var testStyleSheet = document.styleSheets.item(1);

    /* Initialize an object to store viewport values to be used by the test
       asserts. */
    var viewport = new Object();

    /* An element with the same size as the initial containing block. */
    var testElm = document.getElementById("test");

    if (window.testRunner) {{
        viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
        viewport.deviceWidth = 320;
        viewport.deviceHeight = 480;
        viewport.initialWidth = 320;
        viewport.initialHeight = 352;

        var vpString = internals.configurationForViewport(document, 1,
                                                          viewport.deviceWidth,
                                                          viewport.deviceHeight,
                                                          viewport.initialWidth,
                                                          viewport.initialHeight);

        var match = /viewport size (.+)x(.+) scale (.+ )/.exec(vpString);

        if (match) {{
            viewport.actualWidth = parseFloat(match[1]);
            viewport.actualHeight = parseFloat(match[2]);
            viewport.zoom = parseFloat(match[3]);
        }}
    }}
    else {{
        /* Disable the stylesheet that contains the @viewport to test. */
        testStyleSheet.disabled = true;

        /* Retrieve the initial viewport values before applying the @viewport to
           test. */
        viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
        viewport.initialWidth = testElm.offsetWidth;
        viewport.initialHeight = testElm.offsetHeight;

        /* Enable the stylesheet that contains the @viewport to test. */
        testStyleSheet.disabled = false;

        /* Retrieve the actual viewport values for the test. */
        viewport.actualWidth = testElm.offsetWidth;
        viewport.actualHeight = testElm.offsetHeight;
        viewport.zoom = viewport.initialWidth / window.innerWidth;
    }}

    /* Check viewport values. */
    test.step(function(){{
        {TEST_FUNCTION}
    }});

    /* Finished. Show the results. */
    test.done();
    testStyleSheet.disabled = true;
    document.getElementById("log").style.display = "block";
   }}
  </script>
 </head>
 <body>
  <div id="test">
   <div id="log"></div>
  </div>
 </body>
</html>
